<template>
  <h1>计算器练习</h1>
  <input type="text" placeholder="请输入数字1" v-model="a">
  <input type="text" placeholder="请输入数字2" v-model="b">
  <hr>
  <button @click="calc('+')">加</button>
  <button @click="calc('-')">减</button>
  <button @click="calc('*')">乘</button>
  <button @click="calc('/')">除</button>
  <h4>运算结果:{{result}}</h4>
</template>

<script setup>
  import {ref} from "vue";
  const a = ref('');
  const b = ref('');
  const result = ref('');

  //定义箭头函数
  const calc = (o)=>{
    //响应式变量在JS中必须使用.value
    //eval("5*2") 结果为10;将字符串形式的算式转为JS进行运算
    result.value = eval(a.value + o + b.value);
  }
</script>

<style scoped>

</style>